<template>
	<view class="flex flex-col h-screen">
		<uni-nav-bar title="我的证书" fixed color="#000" statusBar backgroundColor="transparent" :border="false" :rightText="!showDel?'删除':'取消删除'"
			left-icon="left" @clickLeft="back" @clickRight="handleShowDel"></uni-nav-bar>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="p-30" v-if="aptitudeList.length">
					<view class="flex flex-wrap rounded-lg bg-gradient-to-b from-[#F2F8FF] to-[#D0EDFF] pt-20 px-20">
						<view class="flex flex-col justify-center items-center w-[32%] mb-20 item" v-for="e,i in aptitudeList" :key="i" v-show="i < 6">
							<view class="flex rounded-md overflow-hidden w-full" @click="handlePreView(e.url)">
								<ImageBoxVue :src="e.url" width="100%" height="160rpx"></ImageBoxVue>
							</view>
							<text class="mt-10">{{e.name}}</text>
							<uni-icons v-if="showDel" type="trash" size="24" @click="handleDel(e)"></uni-icons>
						</view>
					</view>
				</view>
				<NoDataVue v-else></NoDataVue>
			</scroll-view>
		</view>
		<view class="p-30">
			<view @click="onPath('/pages/user/addCertificate')" class="bg-[#329EFF] text-center text-white p-20 text-lg rounded-lg">添加证书</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app"
	import userApi from '@/apis/apiList/userApi';
	
	const showDel = ref(false)
	const anchorId = ref('')
	const aptitudeList = ref([])
	
	onLoad(() => {
		anchorId.value = uni.getStorageSync('anchor').id
	})
	onShow(() => {
		getJobList()
	})
	
	const handleDel = (item) => {
		const opt = {
			id: item.id
		}
		userApi.anchorDelAnchorQua(opt).then(res => {
			getJobList()
		})
	}
	const handleShowDel = () => {
		showDel.value = !showDel.value
	}
	const lessonCount = (num, num1) => {
		return ((num / num1) * 100).toFixed(2)
	}
	const getJobList = () => {
		const opt = {
			"anchor.id": anchorId.value
		}
		userApi.queryAchorqualistByAchor(opt).then(res => {
			aptitudeList.value = res.data
		})
	}
	
	const handlePreView = (img) => {
		uni.previewImage({
			current: img,
			urls: [img]
		})
	}
	
	const onPath = (router) => {
		if (aptitudeList.value.length == 6) {
			uni.showToast({
				icon: "none",
				title: '最多只能添加6个证书！'
			})
			return
		}
		uni.navigateTo({
			url: router,
		});
	}
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss" scoped>
.item {
	margin-right: 2%;
	&:nth-child(3n) {
		margin-right: 0;
	}
}
</style>